
<template>
  <!--    最外层layer1  左半部分 -->
  <div class="gepD4-layer1-left">

    <dv-border-box-11 backgroundColor="#123f43" :color="['#8ae1f4', '#194b50']" title="简报"   >
      <div class="gepD4FormOutput">
        <div class="report">
          <gep-output-report/>
        </div>
        <div class="gep-output-chart">
<!--          <LeftTop/>-->
          <gep-out-echart/>
        </div>
        <div class="button-container">
          <button  @click="exportToExcel" class="bg-green-800 text-white hover:bg-green-700 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
            <svg class="w-6 h-6 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            <span>下载</span>
          </button>
          <button  @click="backToGep" class="bg-green-800 text-white hover:bg-green-700 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
            <svg class="w-6 h-6 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            <span>返回</span>
          </button>
        </div>

      </div>

    </dv-border-box-11>

  </div>
</template>

<script setup>

import GepOutEchart from "@/views/gepComponent/GepOutEchart.vue";
import GepOutputReport from "@/views/gepComponent/gep-output-report.vue";
import {exportToExcel} from "@/api/gepApi";
import {useGepDataStore} from "@/stores/gep";
const gepDataStore = useGepDataStore();

// 清空表单处理函数 返回按钮的函数
function backToGep() {
  // 用刷新页面代替
  // window.location.reload();
  gepDataStore.reset(); // 调用重置方法
}


</script>

<style scoped>


.gepD4FormOutput {
  width: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%; /* 设置父容器的高度 */

}

.report {
  margin-top: 10px;
  min-height: 240px;
  flex: 2;

}

.gep-output-chart {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;

  flex: 4;

}

.button-container {
  margin: 10px 100px 20px 100px;
  display: flex; /* 使用 Flexbox */
  flex-direction: row; /* 垂直排列 */
  justify-content: space-between;
  gap: 20px; /* 按钮间距 */

}

</style>
